<template>
<el-dialog :close-on-click-modal="false" :title="listCount[0].ename+'-成员管理'" :visible.sync="show" v-if="show" width="80%" v-loading="loading">	
	<div class="outerFrame" style="position: relative;">
		<div class="fenxi" style="border-top: 2px solid #C0C4CC;border-bottom: 2px solid #C0C4CC;padding: 20px;">
			<p>合同签约人数:<span>{{listCount[0].count}}</span>人，当前注册人数:<span>{{listCount[0].count}}</span>,其中未确认：<span>{{listCount[0].count1}}</span>人,<span>{{listCount[0].count2}}</span>人已确认</p>
		</div>
		<div class="dataTable" v-if="listData" style="margin-top: 10px;">
			<el-table :data="listData.records" stripe border height="500px" v-loading="listLoading" @selection-change="selectionChange">
						<el-table-column type="index" width="50" label="序号"></el-table-column>
						
			<el-table-column prop="mnum" label="工号(可选)">
				<template slot-scope="scope">
					<el-input v-if="scope.row.mnum == ''||scope.row.mnum == null" v-model="mnum"></el-input>
					<span v-if="scope.row.mnum != ''">{{scope.row.mnum}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="rname" label="姓名"></el-table-column>
			<el-table-column prop="phone" label="电话"
				:formatter="
					(row, column) => {
						return row.phone != null ? (row.phone.slice(0,3)+'-'+row.phone.slice(3,12)):'-';
					}
				"
			></el-table-column>
			<el-table-column prop="state" label="状态"
				:formatter="
					(row, column) => {
						if(row.state==1){
							return '待确认';
						}else if(row.state==2){
							return '已确认';
						}else if(row.state==3){
							return '锁死';
						}else if(row.state==4){
							return '团长';
						}else{
							return '-' ;
						}
					}
				"
			></el-table-column>
			<el-table-column label="操作" fixed="right" width="500px">
				<template slot-scope="scope">
					<div class="dataTable-operator">
						<!-- 团长 -->
						<!-- 锁死  有团长情况-->
						<!-- 待确认 有团长情况-->
						<!-- 确认 有团长情况 -->
						<!--  没团长情况 -->
						<el-button size="mini" v-if="tzstate && scope.row.state != 3" icon="el-icon-edit" @click="ChangeState(scope.$index, scope.row,4)">设置对接人</el-button>
						<el-button size="mini" v-if="scope.row.state == 4 " icon="el-icon-edit" @click="ChangeState(scope.$index, scope.row,2)">取消对接人</el-button>
						<el-button size="mini" v-if="scope.row.state != 3 && scope.row.state != 1" icon="el-icon-edit" @click="ChangeState(scope.$index, scope.row,3)">锁死</el-button>
						<el-button size="mini" v-if="scope.row.state == 3" icon="el-icon-edit" @click="ChangeState(scope.$index, scope.row,2)">解锁</el-button>
						<el-button size="mini" v-if="scope.row.state < 2 " icon="el-icon-edit" @click="ChangeState(scope.$index, scope.row,2)">确认</el-button>
						
						<el-button size="mini" v-if="scope.row.mnum == '' || scope.row.mnum == null" icon="el-icon-edit" @click="AddMnum(scope.$index, scope.row)">添加工号</el-button>
						<el-button size="mini" type="danger" icon="el-icon-delete" @click="remove(scope.$index, scope.row)">删除</el-button>
					</div>
				</template>
			</el-table-column>
			</el-table>
			<div class="pageBar">
				<el-pagination
					@size-change="sizeChange"
					@current-change="currentChange"
					:total="listData.total"
					:page-size="request.page.size"
					:current-page="request.page.current"
					:layout="constant.page.layout"
					:page-sizes="constant.page.pageSizes"
				></el-pagination>
			</div>
		</div>
	</div>
</el-dialog>
</template>
<script>
import utils from 'util/utils.js';
import constant from 'util/constant.js';
import api from 'api/crm/member/member.js';
import caches from 'util/caches.js';

export default {
	name: 'menberlist',
	data() {
		return {
			flag:true,
			loading: false,
			listLoading: true,
			tzstate: true,
			show: this.isDisplay,
			mnum:[],
			listData: {},
			listCount:{},
			constant: constant,
			request: utils.newRequest()
		};
	},
	props: {
		isDisplay: {
			type: Boolean,
			default() {
				return false;
			}
		},
		parameter: {
			type: Array | Object,
			default() {
				return {};
			}
		}
	},
	watch: {
		isDisplay(val) {
			this.show = val;
			if (val) {
				this.list();
			}
		},
		show(val) {
			this.$emit('update:isDisplay', val);
		},
		parameter(val) {
			this.parameter = val;
		}
	},
	methods: {
		//更改成员状态
		ChangeState(index, row,val){
			this.request.param.id = row.id;
			this.request.param.state = val;
			utils.confirm('提示', '确定更改吗？', () => {
				// console.log(this.request)
				api.changeState(this.request,
					response => {
						utils.msg.success(response.msg);
						this.list();
					},
					response => {
						utils.msg.warning(response.msg);
					}
				);
			});
		},
		//添加工号
		AddMnum(index, row){
			this.request.param.id = row.id;
			this.request.param.mnum = this.mnum+'';
			utils.confirm('提示', '是否添加工号？', () => {
				// console.log(this.request)
				api.addMnum(this.request,
					response => {
						utils.msg.success(response.msg);
						this.list();
					},
					response => {
						utils.msg.warning(response.msg);
					}
				);
			});
		},
		//改变选择项
		selectionChange(val) {
			//清空
			this.request.param.ids = [];
			for (let item of val) {
				this.request.param.ids.push(item.id);
			}
		},
		//改变每页显示数量
		sizeChange(val) {
			this.request.page.size = val;
			this.list();
		},
		//改变现在的页码
		currentChange(val) {
			this.request.page.current = val;
			this.list();
		},
		//获取数据
		list() {
			this.mnum=[]
			this.listLoading = true;
			this.request = utils.newRequest();
			this.request.param.id = this.parameter.id;
			this.tzstate = true;
			api.memberlist(this.request, response => {
				this.listData = response.data;
				
				let statelist = response.data.records;
				//遍历判断状态
				for (let i = 0; i < statelist.length; i++) {
					if(statelist[i].state == 4 && statelist[i].state != 3){
						// console.log(statelist[i].state)
						this.tzstate = false;
					}
				}
				
				
				this.listLoading = false;
			});
			
			api.listCount(this.request, response => {
				this.listCount = response.data;
				// console.log(response.data)
				this.listLoading = false;
			});
		},
		//删除
		remove(index, row) {
			//单个删除
			if (row) {
				this.request.param.ids = [row.id];
			}
			if (!this.request.param.ids || this.request.param.ids.length == 0) {
				utils.msg.info('请选择至少一行');
				return;
			}
			utils.confirm('确定删除吗？', '提示', () => {
				api.remove(
					this.request,
					response => {
						utils.msg.success(response.msg);
						this.list();
					},
					response => {
						utils.msg.warning(response.msg);
					}
				);
			});
		},
		//搜索
		search() {
			this.list();
		},
		//清空搜索框
		clearSearchVal() {
			this.request.param = {};
		}
	},
	mounted() {
		this.list();
	}
};
</script>

<style lang="scss">
@import '~common/custom/css/common.scss';
</style>
